<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人空间</title>
  <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="./fonts/iconfont.css">
  <link rel="stylesheet" href="./css/login.css">
</head>

<body>
  <header>
    <div class="top">
      <div class="left">
        <a href="#">
          <i class="iconfont Navbar_logo"></i>
        </a>
      </div>
      <div class="right">
        <a href="#"> <i class="iconfont ic_search_tab"></i></a>
        <a href="#" class="login">
          <img src="./images/login.png" alt="">
        </a>
        <a href="#" class="download">
          <img src="./images/download.png" alt="">
        </a>
      </div>
    </div>

  </header>
  <section>
    <div class="banner">

    </div>
    <div class="part1">
      <div class="info">
        <h1><img src="./images/noface.jpg@1c.webp" alt=""></h1>
        <div class="relation">
          <div class="fans">
            <span>
              <p class="num">1</p>
              <p class="type">粉丝</p>
            </span>
            <span>
              <p class="num">99</p>
              <p class="type">关注</p>
            </span><span>
              <p class="num">1000</p>
              <p class="type">获赞</p>
            </span>
          </div>
          <button>编辑资料</button>
        </div>
      </div>

    </div>
    <div class="part2">
      <div class="base">
        <span>哇哈哈</span>
        <i class="iconfont ic_userlevel_5"></i>
      </div>
      <div class="desc">
        <span>来一段个性签名吧~</span>
        <a href="#" class="open ">展开</a>
      </div>
      <div class="uid">
        <p>uid:<span>001235</span></p>
      </div>
    </div>
    <div class="tabs">
      <span class="current">动态</span>
      <span>视频</span>
    </div>
    <div class="list">
      <ul>
        <li>
          <div class="card">
            <div class="user">
              <h5><img src="./images/noface.jpg@1c.webp" alt=""></h5>
              <div class="info">
                <div class="userName">用户1</div>
                <p class="time">2022-11-13</p>
              </div>
            </div>
            <p>
              欢迎来到德玛西亚
              <img src="./images/1.jpg" alt="">
            </p>
          </div>
        </li>
      </ul>
    </div>
  </section>
  <script>
    const a = document.querySelector('.part2 .desc .open')
    a.addEventListener('click', function () {
      const uid = document.querySelector('.part2 .uid');
      const show = document.querySelector('.part2 .show');
      if (!show) {
        a.innerText = '收起'
        uid.style.display = 'block';
        this.classList.add('show')
      } else {
        this.classList.remove('show')
        uid.style.display = 'none';
      }

    })
    // 获取tab栏采用事件冒泡来实习tab栏切换
    const tab = document.querySelector('.tabs');
    tab.addEventListener('click', function (e) {
      if (e.target.tagName === 'SPAN') {

        const current = document.querySelector('.current')
        // console.log(current);

        if (current) { current.classList.remove('current') }

        e.target.classList.add('current')
      }
    })
    const home = document.querySelector('.top .left a')
    home.addEventListener('click', () => location.href = './index.html')
  </script>
</body>

</html>